<template>
	<Modal
		class="valid-code-msg-wrap"
		v-model="visible"
		width="240"
		footer-hide
		:closable="false"
	>
		<Form :ref="validRef" :model="formData" :label-width="0" @submit.native.prevent>
			<FormItem class="image-form-item">
				<div v-if="visible" class="img-parent">
					<img :src="computedValidCodeImgUrl" alt="" width="100%" height="100%">
				</div>

				<Button @click="handleRefreshCode">
					<span>刷新验证码</span>
					<Icon type="md-refresh" />
				</Button>
			</FormItem>

			<FormItem class="input-form-item">
				<Input v-model="formData.validImgCode" placeholder="请填写图形验证码" search enter-button="确定" @on-search="handleConfirm"/>
			</FormItem>
		</Form>
	</Modal>
</template>

<script>
import JBoot from "jboot-env";

export default JBoot.form({
	registryName: 'valid-code-img',

	data (){
		return {
			t: Date.now()
		}
	},

	computed: {
		computedValidCodeImgUrl ({parentParam, t}){
			const {type, mobile} = parentParam ?? {};

			return `/__api/sms/validCode/${type}/${mobile}?t=${t}`;
		}
	},

	methods: {
		handleRefreshCode (){
			this.t = Date.now();
		},

		handleConfirm (){
			const {validImgCode} = this.formData;

			if(!validImgCode) return this.$tips.warning('请输入图形验证码');

			this.$emit('on-success', validImgCode);

			this.close();
		}
	}
});
</script>

<style lang="scss" scoped>
.valid-code-msg-wrap {
	&::v-deep {
		& .image-form-item{
			margin-bottom: 12px;
			& > .ivu-form-item-content{
				display: flex;
				align-items: center;
				& > .img-parent{
					border-radius: 4px;
					overflow: hidden;
					width: 100px;
					height: 32px;
				}
				& > .ivu-btn{
					margin-left: 10px;
				}
			}
		}

		& .input-form-item{
			margin-bottom: 0;
		}
	}
}
</style>
